body {
  --h1-size: 1.602em;
  --h1-line-height: 1.4;
  --h1-margin-top: 3;
  --h1-margin-bottom: 1;
  --h1-weight: 500;
  --h1-style: normal;

  --h2-size: 1.424em;
  --h2-line-height: 1.4;
  --h2-margin-top: 2.25;
  --h2-margin-bottom: 0.5;
  --h2-weight: 500;
  --h2-style: normal;

  --h3-size: 1.266em;
  --h3-line-height: 1.4;
  --h3-margin-top: 1.75;
  --h3-margin-bottom: 0.5;
  --h3-weight: 500;
  --h3-style: normal;

  --h4-size: 1.125em;
  --h4-line-height: 1.5;
  --h4-margin-top: 1.5;
  --h4-margin-bottom: 0.5;
  --h4-weight: 500;
  --h4-style: normal;

  --h5-size: 1em;
  --h5-line-height: 1.5;
  --h5-margin-top: 1.5;
  --h5-margin-bottom: 0.5;
  --h5-weight: 500;
  --h5-style: normal;

  --h6-size: 1em;
  --h6-line-height: 1.5;
  --h6-margin-top: 1.5;
  --h6-margin-bottom: 0.5;
  --h6-weight: 500;
  --h6-style: italic;

  --header-editor-font: var(--font-text);
}

.cm-s-obsidian {
  .cm-header {
    &.cm-header-1 {
      font-family: var(--header-editor-font);
      color: var(--h1-color);
      font-size: var(--h1-size);
      line-height: var(--h1-line-height);
      font-weight: var(--h1-weight);
      font-style: var(--h1-style);
    }

    &.cm-header-2 {
      font-family: var(--header-editor-font);
      color: var(--h2-color);
      font-size: var(--h2-size);
      line-height: var(--h2-line-height);
      font-weight: var(--h2-weight);
      font-style: var(--h2-style);
    }

    &.cm-header-3 {
      font-family: var(--header-editor-font);
      color: var(--h3-color);
      font-size: var(--h3-size);
      line-height: var(--h3-line-height);
      font-weight: var(--h3-weight);
      font-style: var(--h3-style);
    }

    &.cm-header-4 {
      font-family: var(--header-editor-font);
      color: var(--h4-color);
      font-size: var(--h4-size);
      line-height: var(--h4-line-height);
      font-weight: var(--h4-weight);
      font-style: var(--h4-style);
    }

    &.cm-header-5 {
      font-family: var(--header-editor-font);
      color: var(--h5-color);
      font-size: var(--h5-size);
      line-height: var(--h5-line-height);
      font-weight: var(--h5-weight);
      font-style: var(--h5-style);
    }

    &.cm-header-6 {
      font-family: var(--header-editor-font);
      color: var(--h6-color);
      font-size: var(--h6-size);
      line-height: var(--h6-line-height);
      font-weight: var(--h6-weight);
      font-style: var(--h6-style);
    }
  }
}

h1.embedded-note-title {
  color: var(--h1-color);
}

.markdown-preview-view {
  h1 {
    font-family: var(--header-editor-font);
    color: var(--h1-color);
    font-size: var(--h1-size);
    line-height: var(--h1-line-height);
    font-weight: var(--h1-weight);
    font-style: var(--h1-style);
  }

  h2 {
    font-family: var(--header-editor-font);
    color: var(--h2-color);
    font-size: var(--h2-size);
    line-height: var(--h2-line-height);
    font-weight: var(--h2-weight);
    font-style: var(--h2-style);
  }

  h3 {
    font-family: var(--header-editor-font);
    color: var(--h3-color);
    font-size: var(--h3-size);
    line-height: var(--h3-line-height);
    font-weight: var(--h3-weight);
    font-style: var(--h3-style);
  }

  h4 {
    font-family: var(--header-editor-font);
    color: var(--h4-color);
    font-size: var(--h4-size);
    line-height: var(--h4-line-height);
    font-weight: var(--h4-weight);
    font-style: var(--h4-style);
  }

  h5 {
    font-family: var(--header-editor-font);
    color: var(--h5-color);
    font-size: var(--h5-size);
    line-height: var(--h5-line-height);
    font-weight: var(--h5-weight);
    font-style: var(--h5-style);
  }

  h6 {
    font-family: var(--header-editor-font);
    color: var(--h6-color);
    font-size: var(--h6-size);
    line-height: var(--h6-line-height);
    font-weight: var(--h6-weight);
    font-style: var(--h6-style);
  }
}
